<template>
  <div class="login">
    <div class="cont">
      <h1>系统登录</h1>

      <!-- <div class="demo-input-suffix"> -->
      <el-form :model="formData" :rules="rules" ref="formaa">
        <el-form-item prop="account">
          <el-input
            size="small"
            class="mt20"
            placeholder="请输入内容"
            prefix-icon="el-icon-user-solid"
            v-model="formData.account"
          >
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            size="small"
            :type="showPwd ? 'text' : 'password'"
            placeholder="请输入密码"
            v-model="formData.password"
            class="mt20"
          >
            <i slot="prefix" class="iconfont icon-suoding"></i>
            <i
              slot="suffix"
              @click="clickEyes"
              class="iconfont"
              :class="{ 'icon-yanjing': showPwd, 'icon-biyanjing': !showPwd }"
            ></i>
          </el-input>
        </el-form-item>

        <el-button
          class="mt20 btn"
          type="primary"
          size="small"
          @click="loginBtn"
          >登录</el-button
        >
      </el-form>
      <!-- </div> -->
    </div>
  </div>
</template>

<script>
// 引入axios
import axios from "@/utlis/request.js";
import { addRoutes } from '@/router';

export default {
  data() {
    // const validateAccount = (rule, value, callback) => {
    //       let a = /^[a-zA-Z0-9]{6,12}$/

    //       if(a.test(value)){

    //         callback()

    //       }else{
    //         callback(new Error('请输入6-12位数字和字母'))
    //       }
    // };
    return {
      showPwd: false,
      formData: {
        account: "",
        password: "",
      },

      rules: {
        account: [
          { required: true, message: "请将账号输入完整", trigger: "change" },
          // { validator: validateAccount, trigger: "change" },
          { min: 3, max: 5, message: "长度在 3 到 5 位数", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请将密码输入完整", trigger: "change" },
          // { validator: validateAccount, trigger: "change" },
          { min: 3, max: 5, message: "长度在 3 到 5 个位数", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    clickEyes() {
      this.showPwd = !this.showPwd;
    },
    loginBtn() {
      this.$refs.formaa.validate(async (res) => {
        if (res) {
          const res = await axios.post("/users/checkLogin", this.formData);
          console.log(res.data);
          if (res.data.code === 0) {
            localStorage.setItem("token", res.data.token);

            localStorage.setItem("role", res.data.role);

            addRoutes()

            this.$router.push("/home");
          }
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.login {
  width: 100%;
  height: 100%;
  position: relative;
  background: #2d3a4b;

  h1 {
    width: 100%;
    height: 30px;
    line-height: 30px;
    color: #fff;
    font-weight: 600;
    text-align: center;
  }
  .cont {
    width: 400px;
    height: 270px;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin: auto;
  }
  .btn {
    width: 400px;
  }
  /deep/.el-input__inner {
    background: #2d3a4b;
    color: #fff;
  }
}
</style>